<template>
  <div class="food-list" v-if="index === 0">
    <van-tree-select
      v-model:main-active-index="activeIndex"
      height="88vw"
      :items="items"
      @click-nav="navClick"
    >
      <template #content>
        <div v-for="(item,index) in subItem" class="item-bg" :key="index">
          <list-item
          :item="item" 
          :handleAdd="handleAdd"
          :hanleChange="hanleChange" 
          />
        </div>
      </template>
    </van-tree-select>
  </div>

  <div v-else>
     {{ foodData.content }}
  </div>
</template>

<script>
import { reactive ,toRefs} from 'vue'
import FoodListItem from'./FootListItem.vue'
import ListItem from'../../../components/ListItem.vue'
export default {
    props:['index','foodData'],
    components:{
      FoodListItem,
      ListItem,
    },
    setup(props){
        let data=reactive({
           activeIndex:0,
           items: [],
           subItem:[]
        });
        // 初始化数据   
        const initData=()=>{
            let newArray=[]
            props.foodData?.items?.forEach((item,index)=>{
             newArray.push({
                text:item.text
             });
             if(data.activeIndex === index){
              data.subItem = item.children;
             }
             
           })
           data.items=newArray;  
        }
        initData();
        const navClick=(i)=>{
            data.activeIndex = i;
            initData()
        };
        const handleAdd=(id)=>{
            data.subItem.forEach((item,index)=>{
              if(item.id === id){
                item.add = false;
                item.num +=1;
              }
            })
        };
        const hanleChange=(value,detail)=>{
          data.subItem.forEach(item=>{
            if(item.id === detail.name){
              item.num=value;
            }
          });
          // console.log(data.subItem);
        }
        return{
            ...toRefs(data),
            navClick,
            handleAdd,
            hanleChange,
        }
        }
    }
</script>

<style lang="less" scoped>
.food-list {
  margin-top: 20px;
  .item-bg {
    padding: 10px;
  }
  }
  /deep/ .van-tree-select__item--active {
    color: #ffc400;
  }
  /deep/ .van-sidebar-item--select::before {
    background-color: #ffc400;
  }
</style>